<template>
	<view class="couponItem-Box">
		<!-- 钱 -->
		<view class="couponItem-amount">
			<view class="amount">
				￥{{couponItemData.cardDisc?couponItemData.cardDisc+'折':couponItemData.fullAmount}}
			</view>
			<view class="amount-type">
				{{couponItemData.cardDisc?'优惠折扣':'满减金额'}}
			</view>
		</view>

		<view class="couponItem-right">
			<view class="couponItem-rightInfo">
				<!-- 券信息 -->
				<view class="couponItem-info">
					<!-- 名称 -->
					<view class="info-couponName">
						{{couponItemData.name}}
					</view>
					<!-- 提示 -->
					<view class="info-tip">
						{{couponItemData.isoli?"油品卷":""}} {{couponItemData.isDeduction?"参与油币抵扣":""}}
					</view>

					<!-- 有效期 -->
					<view class="info-couponTime">
						{{couponItemData.startTime}} - {{couponItemData.endTime}}
					</view>
				</view>

				<!-- 券状态 -->
				<view class="couponItem-state">
					<view class="auditState state" v-if="couponStatus=='auditing'">
						审核中
					</view>
					<view class="failState state" v-else-if="couponStatus=='fail'">
						已失效
					</view>
					<view class="publishState state" v-else>
						已发布
					</view>
				</view>
			</view>

			<view class="companyInfo">
				油站信息
			</view>

		</view>
		<!-- 样式 -->
		<view class="circle-top"></view>
		<view class="circle-bottom"></view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		computed
	} from 'vue'

	const props = defineProps({
		couponItemData: {
			type: Object,
			default: () => ({
				state: 0, // 0表示失效
				name: '',
				startTime: '',
				endTime: '',
				audit: 1, // 0表示未审核
				cardDisc: '', // 优惠折扣
				fullAmount: '', // 满减金额
				isoli: 0,
				isDeduction: 0,
				companyId: '' // 油站信息
			})
		}
	})

	/**
	 * 处理状态展示
	 */
	const couponStatus = computed(() => {
		if (props.couponItemData.state == 1 && props.couponItemData.audit == 0) {
			return 'publish';
		} else if (props.couponItemData.audit == 1) {
			return 'auditing';
		} else if (props.couponItemData.state == 0 && props.couponItemData.audit == 0) {
			return 'fail';
		}
	});
</script>

<style lang="scss">
	.couponItem-Box {
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 690rpx;
		height: 200rpx;
		margin: auto;
		margin-bottom: 30rpx;

		.circle-top,
		.circle-bottom {
			position: absolute;
			left: 182rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #f5f5f5;
		}

		.circle-top {
			top: -15rpx;
			border-bottom: 1rpx solid #f977195c;
		}

		.circle-bottom {
			bottom: -15rpx;
			border-top: 1rpx solid #f977195c;
		}

		.couponItem-amount {
			width: 200rpx;
			background-color: $u-primary;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			color: $u-primary-light;

			background-image: linear-gradient(-135deg, #f5f5f5 50%, transparent 50%);
			background-size: 23rpx 23rpx;

			background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
				linear-gradient(135deg, #f5f5f5 25%, transparent 25%);

			background-repeat: repeat-y;

			.amount {
				width: 100%;
				height: 135rpx;
				text-align: center;
				line-height: 135rpx;
				font-size: 40rpx;
				font-weight: 550;
				border-bottom: 1px dashed white;
			}

			.amount-type {
				width: 100%;
				margin-top: 15rpx;
				text-align: center;
				font-size: 20rpx;
			}
		}

		.couponItem-right {
			flex: 1;
			padding: 20rpx;
			border-radius: 0rpx 20rpx 20rpx 0rpx;
			border: 1rpx solid #f977195c;
			background-color: #f9eee0;

			.couponItem-rightInfo {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5rpx;

				.couponItem-info {
					flex: 2;
					// border: 1rpx solid #f977195c;

					.info-couponName {
						width: 310rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 34rpx;
					}

					.info-tip {
						margin: 10rpx 0;
						height: 22rpx;
						font-size: 20rpx;
						color: $u-primary-dark;
					}

					.info-couponTime {
						font-size: 20rpx;
						color: gray;
					}
				}

				.couponItem-state {
					width: 120rpx;
					margin-top: 30rpx;

					.state {
						width: 100%;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						border-radius: 30rpx;
						font-size: 25rpx;

					}

					.auditState {
						color: white;
						background: linear-gradient(to right, #fcad24, #F37335);
					}

					.failState {
						background: #ddbb8a;
						border: 2rpx solid #f3bc7c;
						color: #824f20;
					}

					.publishState {
						background: $u-primary;
						color: $u-primary-light;
					}
				}
			}

			.companyInfo {
				font-size: 20rpx;
				color: gray;
			}

		}

	}
</style>